<template>
    <template v-for="(item,index) in arr" :key="item.id">
        <span>{{ index+1 }}.</span><span>{{ item.topics }}</span>
        <p v-for="(i,k) in item.options" :key="item.id" v-html="isRadio(item.answer,i,item.id,choose,k)"></p>
    </template>
</template>

<script setup>
import{ref,reactive} from'vue';
function isRadio(data,i,j,choose,k){
    if(data.length>1){
        
        return `<input type="radio" name=${j}>${choose[k]}.${i}`
    }else{
        return `<input type="radio">${choose[k]}.${i}`
    }
}
const choose =ref(['A','B','C','D']);
const arr = ref([
                        {
                            id: '001',
                            type: 0,
                            topics: '下列选项中哪一项可以用来设置组件的计算属性？',
                            options: ['computed', 'data', 'watch', 'methods'],
                            answer: [0]
                        },
                        {
                            id: '002',
                            type: 0,
                            topics: '下列哪一个指令可以用来绑定动态属性？',
                            options: ['v-if', 'v-show', 'v-for', 'v-bind'],
                            answer: [3]
                        },
                        {
                            id: '003',
                            type: 0,
                            topics: '下列选项中哪一项可以用来设置组件的数据？',
                            options: ['computed', 'data', 'watch', 'methods'],
                            answer: [1]
                        },
                        {
                            id: '004',
                            type: 1,
                            topics: '下列选项中哪些指令可以实现条件渲染？',
                            options: ['v-if', 'v-else', 'v-for', 'v-bind'],
                            answer: [0, 1]
                        }
                    ]);
</script>

<style scoped>

</style>